<template>
	<div class="container">
		<ul v-if="!editData.type">
			<li v-for="item in listData.list">
				<div class="text" @click="itemClickEvent(item)">{{item.content}}</div>
				<div class="btns">
					<img @click="editData.input=item.content;editData.quick_id=item.id;editData.type='edit'" src="@/assets/icon-edit.png">
					<img @click="editData.quick_id=item.id;delEvent()" src="@/assets/icon-delete.png">
				</div>
			</li>
		</ul>
		<div class="edit-cont" v-if="editData.type">
			<textarea v-model="editData.input"/>
			<button v-if="editData.type=='edit'" @click="editEvent">保存</button>
			<button v-if="editData.type=='add'" @click="addEvent">添加</button>
			<button @click="editData.type=''" style="background-color: #ddd;">取消</button>
		</div>
		<div class="footer" @click="editData.type='add'" v-if="!editData.type">
			<span>添加</span>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				listData:{
					loading:false,
					list:[]
				},
				editData:{
					type:false,
					input:'',
					quick_id:''
				}
			}
		},
		created() {
			this.getList();
		},
		methods:{
			getList(){
				this.listData.loading = true;
				this.$http.post("/api/root/kefu/quickList",{
					page:1,
					pagesize:1000
				}).then(res=>{
					if(res.code==1){
						this.listData.list = res.data.list
					}else{
						this.$message(res.msg)
					}
				}).catch(err=>{
					
				}).finally(r=>{
					this.listData.loading = false;
				})
			},
			itemClickEvent(item){
				this.$emit('sendQuickMsg',item.content)
			},
			editEvent(){
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$http.post("/api/root/kefu/quickEdit",{
					content: this.editData.input,
					quick_id: this.editData.quick_id 
				}).then(res => {
					if(res.code == 1){
						this.editData.type='';
						this.editData.input = '';
						this.getList()
					}
					this.$message(res.msg);
				}).catch(err=>{
					
				}).finally(r=>{
					loading.close()
				})
			},
			addEvent(){
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$http.post("/api/root/kefu/quickAdd",{
					content: this.editData.input,
				}).then(res => {
					if(res.code == 1){
						this.editData.type='';
						this.editData.input = '';
						this.getList()
					}
					this.$message(res.msg);
				}).catch(err=>{
					
				}).finally(r=>{
					loading.close()
				})
			},
			delEvent(){
				this.$confirm('确定删除该项', '提示').then(() => {
					const loading = this.$loading({
						lock: true,
						text: 'Loading',
						spinner: 'el-icon-loading',
						background: 'rgba(0, 0, 0, 0.7)'
					});
					this.$http.post("/api/root/kefu/quickDel",{
						quick_id: this.editData.quick_id 
					}).then(res => {
						if(res.code == 1){
							this.getList()
						}
						this.$message(res.msg);
					}).catch(err=>{
						
					}).finally(r=>{
						loading.close()
					})
				}).catch(() => {});
			}
		}
	}
</script>

<style scoped="scoped" lang="less">
	.container{
		ul{
			padding: 0 20px;
			list-style: none;
			li{
				padding: 10px 0;
				color: #333;
				cursor: pointer;
				display: flex;
				align-items: center;
				.text{
					display: flex;
					flex: 1;
					&:hover{
						color: #999;
					}
					&:active{
						color: #333;
					}
				}
				.btns{
					img{
						width: 24px;
						margin-left: 10px;
						opacity: .7;
						&:hover{
							opacity: .9;
						}
						&:active{
							opacity: .7;
						}
					}
				}
			}
		}
		.footer{
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 45px;
			line-height: 45px;
			text-align: center;
			background: linear-gradient(86deg, #DBA954 0%, #EABA6A 100%);
			cursor: pointer;
			user-select: none;
			&:hover{
				opacity: .9;
			}
			&:active{
				opacity: .7;
			}
			span{
				color: #fff;
			}
		}
		.edit-cont{
			textarea{
				width: calc(100% - 40px);
				height: 330px;
				background: #F8F8F8;
				opacity: 1;
				border-radius: 8px;
				margin: 20px;
				box-sizing: border-box;
				padding: 20px;
				border: none;
				resize: none;
			}
			button{
				display: block;
				width: calc(100% - 40px);
				margin: 0 auto;
				height: 45px;
				background: #DBA954;
				opacity: 1;
				border-radius: 10rpx;
				color: #fff;
				border: none;
				border-radius: 10px;
				cursor: pointer;
				user-select: none;
				margin-bottom: 20px;
				&:hover{
					opacity: .9;
				}
				&:active{
					opacity: .7;
				}
			}
		}
	}
</style>
